<template>
	<view>
		<view class="d-flex a-center j-sb py-2 px-3 text-light-muted">
			<view class="iconfont icon-shanchu1" @click="goMyfile"></view>
			<view class="font-md">忘记密码</view>
		</view>
		<view class="p-5">
			<view class="font-big mb-5">密码登录</view>
			<input type="text" class="border-bottom mb-4 uni-input px-0" placeholder="请输入手机号/邮箱/账号"
				placeholder-class="text-light-muted" v-model="username" @focus="focus('username')"
				@blur="blur('username')" :class="focusClass.username?'input-border-color':''" />
			<input type="password" class="border-bottom mb-4 uni-input px-0" placeholder="请输入密码"
				placeholder-class="text-light-muted" v-model="password" @focus="focus('password')"
				@blur="blur('password')" :class="focusClass.password?'input-border-color':''" />
			<button class="py-1 w-100 d-flex a-center j-center main-bg-color  rounded font-md mb-4"
				hover-class="main-bg-hover-color" @click="submit">
				登录
			</button>
			<label class="checkbox d-flex a-center" @click="getCheck">
				<checkbox :checked="check" />
				<text class="text-light-muted font">已阅读并同意XXXXX协议</text>
			</label>
		</view>
	</view>
</template>

<script>
	import {
		getLogin
	} from '@/api/index.js'
	export default {
		data() {
			return {
				check: false,
				username: 'user2',
				password: 'zcmcss',
				focusClass: {
					username: false,
					password: false,
				},
				rules: {
					username: [{
						message: '请输入正确的用户名，用户名长度为2-10之间',
						rule: /^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/
					}],
					password: [{
						message: '请输入正确的密码，密码长度为4-10之间',
						rule: /^[a-zA-Z0-9!@#$%^&*]{4,10}$/
					}]
				}
			}
		},
		methods: {
			goMyfile() {
				uni.switchTab({
					url: '/pages/myfile/myfile'
				})
			},
			focus(key) {
				this.focusClass[key] = true
				console.log('this.focusClass[key]', key);
			},
			blur(key) {
				this.focusClass[key] = false
			},
			getCheck() {
				this.check = !this.check;
			},
			validate(key) {
				let check = true;
				this.rules[key].forEach(v => {
					if (!v.rule.test(this[key])) {
						uni.showToast({
							title: v.message,
							icon: 'none'
						})
						check = false
					}
				})
				return check
			},
			submit() {
				if (!this.validate('username')) {
					return;
				};
				if (!this.validate('password')) {
					return;
				};
				if (!this.check) {
					uni.showToast({
						title: '请先同意相关app和小程序协议',
						icon: 'none'
					})
				} else {
					//请求数据
					getLogin(this.username, this.password).then(res => {
						console.log('res', res);
						this.$store.commit('getUserInfo', res.data)
						if (res.msg == 'ok') {
							uni.switchTab({
								url: '/pages/myfile/myfile'
							})
						}
					})
				}
			}
		},
	}
</script>

<style>

</style>